<template>
  <div class="weui-cell" :class="{ 'weui-cell_warn': !valid }">
    <div class="weui-cell__hd">
      <label class="weui-label" v-html="label" v-if="label" :style="{ width: labelWidth + 'px' }"></label>
    </div>
    <div class="weui-cell__bd">
      <input
        class="weui-input"
        ref="input"
        rel="input"
        :type="type"
        :placeholder="placeholder"
        :value="currentValue"
        :readonly="readonly"
        :number="type === 'number'"
        @focus="onFocus"
        @blur="onBlur"
        @change="onChange"
        @input="handleInput">
    </div>
    <div class="weui-cell__ft">
      <wv-icon type="warn" v-if="!valid"></wv-icon>
      <slot name="ft"></slot>
    </div>
  </div>
</template>

<script>
  import icon from '../icon/index'

  export default {
    components: {
      [icon.name]: icon
    },

    name: 'wv-input',

    props: {
      type: {
        type: String,
        default: 'text'
      },
      label: String,
      labelWidth: {
        type: Number,
        default: 105
      },
      placeholder: String,
      value: String,
      readonly: Boolean,
      disabled: Boolean,
      required: {
        type: Boolean,
        default: false
      },
      pattern: String,
      validateMode: {
        type: Object,
        defualt: function () {
          return {
            onFocus: true,
            onBlur: true,
            onChange: true
          }
        }
      }
    },

    data () {
      return {
        active: false,
        valid: true,
        currentValue: this.value
      }
    },

    methods: {
      doCloseActive () {
        this.active = false
      },

      handleInput (event) {
        this.currentValue = event.target.value
      },

      handleClear () {
        if (this.disabled || this.readonly) return
        this.currentValue = ''
      },

      focus () {
        this.$refs.input.focus()
      },

      onFocus () {
        this.active = true

        if (typeof this.validateMode === 'undefined' || this.validateMode.onFocus !== false) {
          this.validate()
        }
      },

      onBlur () {
        if (typeof this.validateMode === 'undefined' || this.validateMode.onBlur !== false) {
          this.validate()
        }
      },

      onChange () {
        this.$emit('change', this.currentValue)

        if (typeof this.validateMode === 'undefined' || this.validateMode.onChange !== false) {
          this.validate()
        }
      },

      validate () {
        if (this.pattern) {
          const reg = new RegExp(this.pattern)
          if (!reg.test(this.currentValue)) {
            this.valid = false
            return
          }
        }

        if (this.required && this.currentValue === '') {
          this.valid = false
          return
        }

        this.valid = true
      }
    },

    watch: {
      currentValue (val) {
        this.$emit('input', val)
      },

      value (val) {
        this.currentValue = val
      }
    }
  }
</script>

<style scoped lang="scss">
</style>
